<template>
    <div id="comming">
        <div class="list-wrap">        
            <div class="most-expect">
                <p class="ex-title">近期最受期待</p>
                <div class="most-expect-list">
                    <transition-group tag="div" name="sildeUp">
                        <div class="expect-item" v-for="mel in mostExpected" :key="mel.id">
                            <div class="poster">
                                <img v-lazy="picFix(mel.img)" alt="">
                                <span class="wish-bg">{{mel.wish}}人想看</span>
                                <span class="wish-bg-mask"></span>
                                <div class="likes">
                                    <img src="../assets/xin.png" alt="">
                                </div>
                            </div>
                            <h5 class="name textoverS">{{mel.nm}}</h5>
                            <p class="date textoverS">{{mel.comingTitle}}</p>
                        </div>
                    </transition-group>
                </div>
            </div>
            <transition-group tag="div" name="sildeUp" class="coming-list">
                <!-- :key="random()" 当要遍历的数组中没有合适值作为key的值时
                 利用random方法返回的随机数x.xxxxxxxxxx作为key 防止重复引起报错 -->
                <div v-for="(coms,keys) in fenzu" :key="random()">
                    <p class="group-date">{{keys}}</p>
                    <div class="item" style="borderBottom: 1px solid rgb(218, 218, 218);" v-for="com in coms" :key="com.id">
                        <div class="main-block">
                            <div class="pic">
                                <img v-lazy="picFix(com.img)" alt="">
                            </div>
                            <div class="contents-wrap">
                                <div class="content">
                                    <div class="movie-title textoverS">
                                        <div class="title">{{com.nm}}</div>
                                        <div class="label" v-if="com.version=='v2d imax'" style="width:43px;">
                                            <img src="../assets/mv1.png" alt="">
                                        </div>
                                        <div class="label" v-if="com.preShow==true" style="width:23px;">
                                            <img src="../assets/mv2.png" alt="">
                                        </div>
                                        <div class="label" v-if="com.version=='v3d imax'" style="width:43px;">
                                            <img src="../assets/mv3.png" alt="">
                                        </div>
                                        <div class="label" v-if="com.version=='v3d'" style="width:20px;">
                                            <img src="../assets/mv5.png" alt="">
                                        </div>
                                    </div>
                                    <div class="movie-detail">
                                        <div class="wantsee textoverS">
                                            <span class="num">{{com.wish}}</span>
                                            人想看
                                        </div>
                                        <div class="actors textoverS" v-if="typeof (com.star) == 'string'">
                                            主演：{{com.star}}
                                        </div>
                                        <div class="showtime">
                                            {{com.rt}}上映
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-block">
                                    <div class="btn" v-if="com.showst==4">
                                        <span>预售</span>
                                    </div>
                                    <div class="btn" v-else style="backgroundColor:#faaf00;">
                                        <span>想看</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition-group>           
        </div>
    </div>     
</template>

<script>
import '@/scss/comming.scss';    
import qs from 'qs';

    export default {
        created () {
            // this.id = this.$route.params.movieId;

            // 近期最受期待电影详情
            this.axios.get('/ajax/mostExpected',{
                params:{
                    ci: 20,
                    limit: 10,
                    offset: 0,
                    token: '',
                }
            }).then((res)=>{
                this.mostExpected = res.data.coming;
                console.log("mostExpected",this.mostExpected);
            });

            // 即将上映电影详情
            this.axios.get('/ajax/comingList',{
                params:{
                    ci: 20,
                    token: '',
                    limit: 10,
                }
            }).then((res)=>{
                this.comingList = res.data.coming;
                console.log("comingList",this.comingList);
                
                // 遍历数组所有的成员，以成员的某个数据作为分组的组名
                // 在添加前，先判断对象上的属性（组名）是否存在，若不存在则设置一个空数组
                // 将成员添加到对应的属性（组）上
                let fenzu = {}
                this.comingList.forEach((item) => {
                    if(!fenzu[item.comingTitle]){
                        fenzu[item.comingTitle] = [item];
                    }else{
                        fenzu[item.comingTitle].push(item);
                    }
                });
                this.fenzu = fenzu;
                
                // 或者 强制更新
                // this.$forceUpdate();
            });
        },
        data(){
            return {
                // id:'',
                mostExpected:[],
                comingList: [],
                fenzu:{},
            }
        },
        methods:{
            picFix(url){
                if(typeof url == "string"){
                    return url.replace('w.h','110.150');
                }            
            },

            // 返回随机数
            random(){
                return Math.random();
            }
        }
    }
</script>